<template>
  <div class="hear-bar">
    <!-- 左 -->
    <yk-space align="center" :size="12" style="cursor:pointer" @click="backHome"> 
      <img data-v-3a4b8fe9=""
        src="data:image/svg+xml,%3csvg%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_14_19)'%3e%3cpath%20d='M28.4449%207.72412H39.7241L25.7991%2032.2759H14.5198L28.4449%207.72412Z'%20fill='%232B5AED'/%3e%3cpath%20opacity='0.5'%20d='M13.9681%2032.2759H25.2004L25.2004%207.72414H13.9681L13.9681%2032.2759Z'%20fill='%232B5AED'/%3e%3cpath%20opacity='0.5'%20d='M39.8212%2032.2759H30.166L30.166%207.72414H39.8212V32.2759Z'%20fill='%232B5AED'/%3e%3cpath%20d='M5.70597%2017.3793L11.3122%207.72409H0.079895L5.70597%2017.3793Z'%20fill='%232B5AED'/%3e%3cpath%20d='M13.9449%207.72412H25.2043L11.2793%2032.2759H0L13.9449%207.72412Z'%20fill='%232B5AED'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_14_19'%3e%3crect%20width='40'%20height='24.5517'%20fill='white'%20transform='translate(0%207.72412)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e"
         style="width: 40px; height: 40px;"
        class="logo"
      />
      <span class="name">逸刻博客后台</span>
    </yk-space>
  <!-- 右 -->
    <yk-space align="center" size="xl">
      <yk-badge is-dot>
        <IconMailOutline style="font-size: 20px;"/>
      </yk-badge>
      <yk-avatar 
        img-url="https://www.huohuo90.com:3003/user/6353b034dd4b583975e77fbe.png"
      ></yk-avatar>
      <div>
        <yk-theme />
      </div>
      <yk-button>退出</yk-button>
    </yk-space>
  </div>
</template>
<script lang="ts" setup>
import {useRouter} from 'vue-router'
const router = useRouter()
//返回总览
const backHome = ()=>{
  router.push('/')
}
</script>

<style lang="less" scoped>
.hear-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background-color: @bg-color-l;
  // z-index:10
  display: flex; //两边分
  justify-content: space-between; //两边分
  align-items: center;  //上下居中
  padding: 0 @space-xl;//两边间距

  .logo{
     height: 24px;
     width: 38px;
  }

  .name {
     font-size: 20px;
     font-weight: 600;
  }
}
</style>
